<script lang="ts" setup>
// import NavigationBar from "@/components/NavigationBar/index.vue";
import withdrawp from "@/components/Withdrawals/BRARWithdraw/dataEntry.vue";
import { useI18n } from "vue-i18n";
import { ref, onMounted, reactive, watch } from "vue";
// import { Field } from "vant";
import { useRouter } from "vue-router";
import { WalletAxios } from "@/api";
import { GetUserBankCardByUidRes } from "@/types";
import { UserStore } from "@/store";
const userStore = UserStore();
const { t } = useI18n();
const router = useRouter();
const setMagnification = (type, index) => {
  getMagnification.value = type;
  withdrawalMethod.value = channelList.value[index].userWithdrawalMethod.split(",");
};
//可提现的金额
const balance: any = ref(0);
onMounted(() => {
  balance.value = router.currentRoute.value.query.balance;
  // if (userStore.isLogin) {
  //   getExtractInfo();
  // }
  getWithdrawalPaymentChannelList();
});
//设置充值渠道
const getMagnification = ref({
  id: 0,
  paymentChannelName: "",
  paymentChannelType: 0,
  sort: 0,
});
const withdrawalMethod: any = ref([]);
// 获取充值渠道
const channelList = ref<any>([]);
const getWithdrawalPaymentChannelList = () => {
  WalletAxios.getWithdrawalPaymentChannelList().then(res => {
    if (res.list.length > 0) {
      channelList.value = res.list;
      getMagnification.value = channelList.value[0];
      withdrawalMethod.value = channelList.value[0].userWithdrawalMethod.split(",");
    }
  });
};
const getuserBindBankCardReq = (): GetUserBankCardByUidRes => {
  return {
    id: 0,
    receivingAccount: "",
    isSuccess: 0,
  };
};
const bankData = reactive<GetUserBankCardByUidRes>(getuserBindBankCardReq());
const isdisabled = ref(true);

const refwithdrawp = ref();
const openPopup = () => {
  refwithdrawp.value.clickPopup();
};
const count = ref<number>(0);
const inputValue = ref<string>(""); // 初始化为一个空字符串

// 监听 count 的变化以更新 inputValue
watch(count, newValue => {
  inputValue.value = newValue === 0 ? "" : String(newValue);
});

const updateCount = () => {
  count.value = inputValue.value ? Number(inputValue.value) : 0; // 处理输入
};
//提现完成后
const onFinish = () => {
  //查询用户余额；
  userStore.getBalance();
  count.value = 0;
  inputValue.value = " ";
};
</script>
<template>
  <!-- 提款页面 -->
  <div class="frame-div">
    <!-- <NavigationBar :navigationName="t('navigationBar.paymentName')" /> -->
    <!-- <div class="interval-frame"></div> -->
    <div class="content-frame">
      <div class="payment-channel df ai-center">
        <div class="payment-frame">
          <div class="tiltie-frame">{{ t("userSet.paymentChannel") }}:</div>
          <div class="paymentlist-frame">
            <div class="df">
              <div class="df">
                <div
                  v-for="(item, index) in channelList"
                  :key="index"
                  class="paymentlist-type"
                  :class="{ gradient: item.id == getMagnification.id }"
                  @click="setMagnification(item, index)"
                >
                  PIX-{{ index + 1 }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="title-frame">
        {{ t("paymentPage.myBalance") }}
      </div>
      <div class="money-frame df ai-center jc-center">
        <img class="pdd_icon" src="@/image/new_img/home/user_img/pdd_icon_coin.png" />
        <div class="money-val">{{ userStore.balance }}</div>
      </div>
      <div class="input-title-content">{{ t("paymentPage.withdrawalAmount") }}</div>
      <div class="input-frame df ai-center">
        <div class="input-title-frame">
          {{ t("currencyType.pt") }}
        </div>
        <div class="field-class df ai-center">
          <!-- <Field
            class="field-class-frame"
            v-model.number="inputValue"
            :center="true"
            :placeholder="t('inputPlaceholder.rechargePlaceholder')"
            color="#ffffff"
            type="number"
            @input="updateCount"
          /> -->
          <input
            class="field-class-frame1"
            type="number"
            :disabled="userStore.withdrawDama / 100 !== 0"
            v-model.number="inputValue"
            :placeholder="t('inputPlaceholder.rechargePlaceholder')"
            @input="updateCount"
          />
        </div>
      </div>
      <div class="cpfVerificar-frame" v-if="userStore.withdrawDama / 100 !== 0">
        还需要打码量{{ userStore.withdrawDama / 100 }},无法提现
      </div>
      <div class="bottom-frame">
        <img
          v-show="
            count < 10 ||
            userStore.balance < count ||
            (userStore.userInfoDetails.profile.cpf === '' &&
              userStore.userInfoDetails.profile.cpfName === '')
          "
          src="@/image/new_img/home/user_img/btnv2_refund_disable.png"
        />
        <img
          v-show="
            count >= 10 &&
            userStore.balance > count &&
            userStore.withdrawDama / 100 === 0 &&
            userStore.userInfoDetails.profile.cpf !== '' &&
            userStore.userInfoDetails.profile.cpfName !== ''
          "
          src="@/image/new_img/home/user_img/btnv2_refund_enable.png"
          @click="openPopup"
        />
      </div>
      <withdrawp
        v-if="withdrawalMethod.length > 0"
        :paymentChannelType="getMagnification.paymentChannelType"
        ref="refwithdrawp"
        :title="t('navigationBar.paymentName')"
        :isdisabled="isdisabled"
        :bank-data="bankData"
        :withdrawalMethod="withdrawalMethod"
        :momey="count"
        @on-finish="onFinish"
      />
    </div>
  </div>
</template>
<style lang="less" scoped>
.content-frame {
  width: calc(100% - 60px);
  height: auto;
  margin-left: 30px;

  .payment-channel {
    width: 100%;
    height: 166.5px;
    margin-top: 38px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);

    .payment-frame {
      width: calc(100% - 35px);
      margin-left: 35px;
    }

    .tiltie-frame {
      color: rgba(255, 255, 255, 0.85);
      font-size: 28px;
    }

    .paymentlist-frame {
      width: 100%;
      height: auto;
      overflow-x: scroll;
      margin-top: 16px;
    }

    .paymentlist-frame::-webkit-scrollbar {
      display: none;
    }

    .paymentlist-type {
      width: 166.5px;
      height: 66px;
      background: rgba(255, 255, 255, 0.15);
      color: rgba(255, 255, 255, 0.65);
      border-radius: 10px;
      margin-right: 17px;
      text-align: center;
      line-height: 66px;
      font-size: 22px;
    }

    .gradient {
      background-image: linear-gradient(69deg, #fe7919 0%, #ab3fe7 100%);
    }
  }
}

.title-frame {
  width: 100%;
  height: auto;
  text-align: center;
  font-size: 28px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 39px;
}

.money-frame {
  width: auto;
  height: auto;
  margin-top: 32px;

  .pdd_icon {
    width: 48px;
    height: 48px;
    margin-right: 15px;
  }

  .money-val {
    color: #ffffff;
    font-size: 76px;
    font-weight: 400;
  }
}

.input-frame {
  width: 100%;
  height: 85px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background-color: rgba(255, 255, 255, 0.04);
  border-radius: 20px;
  margin-top: 27px;
}

.input-title-frame {
  color: #ab3fe7;
  font-size: 28px;
  margin-left: 22px;
  font-weight: 700;
}

.input-frame {
  width: 100%;
  height: 96px;
}
.field-class {
  width: 80%;
  height: 96px;
  margin-left: 20px;
}
:deep(.field-class) {
  .van-field__body {
    margin-top: 6px;
  }
  .van-field__control {
    font-family: monospace;
    color: rgba(255, 255, 255, 0.85);
    font-size: 28px;
    font-weight: 400;
    height: 50px;
    line-height: 50px;
    padding-bottom: 6px;
  }
  .van-field__control::-webkit-input-placeholder {
    font-family: monospace;
    color: #757575;
    font-size: 38px;
    font-weight: 400;
    height: 50px;
    line-height: 50px;
    padding-bottom: 6px;
  }
}

.bottom-frame {
  margin-top: 61px;
  text-align: center;

  img {
    width: 248px;
    height: 100px;
  }
}

.input-title-content {
  font-weight: 400;
  font-size: 28px;
  color: #ffffff;
  margin-top: 42px;
}
.field-class-frame {
  width: 80%;
  height: 96px;
}
.field-class-frame1 {
  width: 70%;
  height: 50px;
  background-color: transparent;
  color: rgba(255, 255, 255, 0.85);
  border: none;
  font-size: 28px;
  line-height: 78px;
}
.field-class-frame1::-webkit-inner-spin-button,
.field-class-frame1::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.field-class-frame1:-moz-placeholder {
  color: #524f62;
  font-size: 28px;
}
.field-class-frame1::-moz-placeholder {
  color: #524f62;
}
.cpfVerificar-frame {
  font-size: 28px;
  color: #eb5757;
  margin-top: 13px;
}
</style>
